<template>
  <Modal
    v-model:visible="visible"
    :title="$t('Appliance.ShutdownTips.Title.Text')"
    :ok-text="$t('Appliance.ShutdownTips.Confirm.Text')"
    :cancel-text="$t('APP.Common.Cancel.Text')"
    @ok="emit('confirm')"
  >
    <image class="main-image" :src="$t('Appliance.ShutdownTips.RemoteControl.Main.Image')" />

    <view class="tips">
      <text>{{ shutdownTipsContent.prefix || '' }}</text>
      <image class="hint-icon" :src="'/pages/appliance/static/PairingControl.png'" />
      <text>{{ shutdownTipsContent.suffix || '' }}</text>
    </view>
  </Modal>
</template>

<script setup lang="ts">
import Modal from '@/common/modal.vue'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { useI18n } from 'vue-i18n'

const props = defineProps<{
  show: boolean
  control: BaseController.Control
}>()
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'confirm'): void
}>()

const visible = computed({
  get() {
    return props.show
  },
  set(show) {
    emit('update:show', show)
  },
})

const i18n = useI18n()
const shutdownTipsContent = computed(() => {
  const content = i18n.t('Appliance.ShutdownTips.Content.Text')
  const [prefix, suffix] = content.split('{icon}')
  return { prefix, suffix }
})
</script>

<style scoped lang="less">
.main-image {
  width: 560rpx;
  height: 282rpx;
}
.tips {
  line-height: 50rpx;
  font-size: 32rpx;
  font-weight: 400;
  text-align: left;
}
.hint-icon {
  width: 40rpx;
  height: 30rpx;
  vertical-align: middle;
}
</style>
